<!doctype html>
<!--[if lt IE 7 ]><html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="no-js ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="designer" content="网站开发设计制作：杭州蒙特信息技术有限公司 www.mountor.com 咨询电话0571-88368188" />
    <meta name="description" content="公司名称" />
    <meta name="keywords" content="公司名称" />
    <title>index</title>
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <link href="css/module.css" rel="stylesheet" type="text/css" />
    <link href="css/less_reset.css" rel="stylesheet" type="text/css" />
    <link href="css/animate.export.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
    <link href="css/index.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
    <script type="text/javascript" src="js/collie.min.js"></script>
    <!--[if IE]>
<script src="js/html5.js"></script>
<![endif]-->
    <!--[if IE 6]> 
<script src="js/iepng.js" type="text/javascript"></script> 
<script type="text/javascript">
   EvPNG.fix('div, ul, img, li, input, a, span ,p ,dt ,dd');  
</script>
<![endif]-->
    <style>

    </style>
</head>

<body>
<!--     <a class="smoke-triggle" style="display: block;margin:0 auto;width:200px;text-align: center;cursor: pointer;color: red;padding:10px;background-color: #ccc">烟雾页面切换效果</a> -->
    <div id="bg-transition" class="fill">
        <div data-loading-state-add-class="display-none" class="bg-transition-cloud js-bg-transition-cloud"></div>
    </div>
    <div class="wrap">
        <div class="header">
        </div>
        <div class="main-box">

            <div class="banner-demo" data-scroll-watch style="display: none">
                <ul>
                    <li class="banner_item" style="background-image:url(./images/banner3.jpg)"></li>
                </ul>
            </div>
            <div class="bubble-demo" style="display: none">
                <img src="images/reactor.svg" width="290" height="434">
                <div class="promo-section-deco__reactor_bulb size1"></div>
                <div class="promo-section-deco__reactor_bulb size2"></div>    
                <div class="promo-section-deco__reactor_bulb size3"></div>     
                <div class="promo-section-deco__reactor_bulb size4"></div>
                <div class="promo-section-deco__reactor_bulb size5"></div>
                <div class="promo-section-deco__reactor_bulb size6"></div>
                <div class="promo-section-deco__reactor_bulb size7"></div> 
                <div class="promo-section-deco__reactor_bulb size8"></div>                   
            </div>
            <br>
            <div class="container2 sparkley" id="container">
                <div id="sprite">
                </div>
                <div class="butterfly butterfly1">
                    <div class="leftSide"></div>
                    <div class="body"></div>
                    <div class="rightSide"></div>
                </div>
                <div class="butterfly butterfly2">
                    <div class="leftSide leftSide2"></div>
                    <div class="body body2"></div>
                    <div class="rightSide rightSide2"></div>
                </div>                
            </div>
            <br>
            <script type="text/javascript">
            var layer = new collie.Layer({
                width: 300,
                height: 200
            });
            collie.ImageManager.add({
                "ground": "images/iboy_bg.png",
            });
            var oBackground = new collie.DisplayObject({
                x: 0,
                y: 0,
                width: 300,
                height: 200,
                backgroundRepeat: "repeat", // Repeat X-Axis
            }).addTo(layer);

            var oGround = new collie.DisplayObject({
                x: 0,
                width: 320 * 2,
                height: 88,
                velocityX: -80,
                backgroundRepeat: "repeat-x",
                rangeX: [-320, 0],
                positionRepeat: true,
                backgroundImage: "ground"
            }).bottom(0).addTo(layer);
            collie.Renderer.addLayer(layer);
            collie.Renderer.load(document.getElementById("container"));
            collie.Renderer.start();
            $("#container").mouseover(function(event) {
                console.log(oGround.velocityX)
            });
            </script>
            <h3 style="font-size: 14px;line-height: 28px">1.css变量</h3>
            <br>
            <br>
            <div class="button-demo smoke-triggle">
                <span>点我出现烟雾</span>
            </div>
            <br>
            <div class="svg-demo" style="display: none">
                <svg version="1.1" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve" id="svgdemo" stroke="#000" stroke-width="200" fill="none">
                    <g>
                        <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)">
                            <path d="M4645.5,5016.5c-30.7-3.8-140-17.3-239.8-28.8c-573.5-65.2-1239.2-280.1-1751.3-565.9C1256,3639.2,350.6,2311.8,124.3,712c-36.4-260.9-30.7-987.9,9.6-1252.6C300.7-1633.9,776.5-2583.5,1538-3345c761.5-761.5,1707.2-1235.3,2804.4-1404.1c287.7-44.1,1028.2-44.1,1315.9,0c1099.1,168.8,2039.1,640.7,2804.4,1404.1c763.5,765.4,1235.3,1705.3,1404.2,2804.4c44.1,287.7,44.1,1028.2,0,1315.9c-168.8,1095.3-642.6,2044.8-1400.3,2800.6C7701.2,4339.4,6742.1,4820.9,5667.9,4982C5479.9,5008.9,4768.3,5033.8,4645.5,5016.5z M5393.6,4682.8c619.6-57.5,1101.1-191.8,1649.7-460.4c1172-571.6,2058.3-1655.4,2384.3-2915.7c412.4-1594-15.3-3237.9-1145.2-4400.4C7716.6-3673,6951.2-4118,6180.1-4313.7c-671.4-168.8-1294.8-195.7-1966.2-84.4C2779.1-4158.3,1530.3-3228,895.4-1925.5c-157.3,318.4-249.4,565.9-324.2,859.4c-203.3,792.2-203.3,1574.9,0,2367.1c147.7,577.4,458.5,1200.8,838.3,1682.3c136.2,174.6,550.5,588.9,725.1,725.1c351,278.1,855.5,560.1,1279.4,715.5C4018.2,4644.4,4754.8,4742.2,5393.6,4682.8z"></path>
                            <path d="M6640.5,2722.3c-5.8-13.4-7.7-1195-5.8-2624.1l5.8-2599.2l571.6-5.7l569.7-3.8v2628v2628h-565.9C6780.5,2745.4,6646.2,2739.6,6640.5,2722.3z M7455.7,117.4v-2282.7h-249.4H6957V117.4v2282.7h249.4h249.4V117.4z"></path>
                            <path d="M2431.9,2680.1l-46-49.9l-1.9-2512.9v-2512.9l48-49.9c101.7-107.4,36.4-145.8,1993,1189.3C5410.9-584.7,6237.6-11.1,6262.6,13.8c53.7,61.4,53.7,145.8,0,207.2c-24.9,24.9-851.7,598.5-1837.7,1269.9C2470.2,2824,2531.6,2787.6,2431.9,2680.1z M4296.4,1182c851.7-579.3,1548-1058.9,1548-1064.6c0-13.4-3090.3-2117.7-3121-2125.4c-21.1-5.8-24.9,387.5-24.9,2125.4c0,1764.8,3.8,2131.1,24.9,2125.4C2738.8,2238.9,3446.6,1763.2,4296.4,1182z"></path>
                        </g>
                    </g>
                </svg>
            </div>
            <div class="svg-demo2" style="display: none">
                <svg version="1.1" id="svgdemo2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="194 -104 1000 1000" enable-background="new 194 -104 500 500" xml:space="preserve" width="300">
                    <g>
                        <polyline fill="none" stroke="#5AC5C1" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
        492,339.5 294,339.5 294,826 1086,826 1086,339.5 492,339.5   " />
                    </g>
                    <g>
                        <polyline fill="none" stroke="#5AC5C1" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
        452.4,397.9 373.2,397.9 373.2,495.2 452.4,495.2 452.4,397.9" />
                        <polyline fill="none" stroke="#5AC5C1" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
        591,397.9 511.8,397.9 511.8,495.2 591,495.2 591,397.9   " />
                        <polyline fill="none" stroke="#5AC5C1" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
        729.6,397.9 650.4,397.9 650.4,495.2 729.6,495.2 729.6,397.9     " />
                        <polyline fill="none" stroke="#5AC5C1" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
        868.2,397.9 789,397.9 789,495.2 868.2,495.2 868.2,397.9     " />
                        <polyline fill="none" stroke="#5AC5C1" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
        452.4,543.8 373.2,543.8 373.2,641.1 452.4,641.1 452.4,543.8     " />
                        <polyline fill="none" stroke="#5AC5C1" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
        591,543.8 511.8,543.8 511.8,641.1 591,641.1 591,543.8   " />
                        <polyline fill="none" stroke="#5AC5C1" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
        729.6,543.8 650.4,543.8 650.4,641.1 729.6,641.1 729.6,543.8     " />
                    </g>
                    <g>
                        <polyline fill="none" stroke="#F2856B" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
        927.6,397.9 1006.8,397.9 1006.8,641.1 789,641.1 789,543.8 927.6,543.8 927.6,397.9   " />
                    </g>
                    <g>
                        <polyline fill="none" stroke="#82D8D5" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
        1006.8,699.5 373.2,699.5 373.2,767.6 1006.8,767.6 1006.8,699.5  " />
                    </g>
                    <g>
                        <path fill="none" stroke="#FFBB4D" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
        M466.9,320.1c0,0,58-105.3,150.5-111.9c92.5-6.6,215.2,51.8,280.6-81s39-201.2,39-201.2" />
                    </g>
                </svg>
            </div>
            <br>
            <br>
            <h3 style="font-size: 14px;line-height: 28px">2.SVG全称可伸缩矢量图形,可在图像质量不下降的情况下被放大。</h3>
            <input type="range" min="0" max="100" value="100" step="10" style="background: linear-gradient(to right, rgb(5, 156, 250), white 100%, white);" id="rangeinput">
            <div class="svg-demo3">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" viewBox="0 0 64 64" id="svgLoan">
                    <defs>
                        <polygon id="icon-loan-feature-copy-a" points="9 8 17 8 17 52 13 58 9 52"></polygon>
                    </defs>
                    <g fill="none" fill-rule="evenodd">
                        <rect width="64" height="64"></rect>
                        <path stroke="#2057AC" stroke-width="2" d="M22,9 L22,55 L56,55 L56,16.4807211 L46.6460989,9 L22,9 Z" class="color1"></path>
                        <path stroke="#FA2814" stroke-width="2" d="M45,49 C47.7614237,49 50,46.7614237 50,44 C50,41.2385763 47.7614237,39 45,39 C42.2385763,39 40,41.2385763 40,44 C40,46.7614237 42.2385763,49 45,49 Z" class="color2"></path>
                        <polyline stroke="#2057AC" stroke-width="2" points="9 13 7 13 7 26" class="color1"></polyline>
                        <path stroke="#2057AC" stroke-width="2" d="M29 21L43 21M29 25L47 25" class="color1"></path>
                        <g>
                            <use fill="#D2DDEE" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-loan-feature-copy-a"></use>
                            <path class="color1" stroke="#2057AC" stroke-width="2" d="M10,9 L10,51.6972244 L13,56.1972244 L16,51.6972244 L16,9 L10,9 Z" style="stroke-dasharray: 102.211, 102.211; stroke-dashoffset: 0;"></path>
                        </g>
                    </g>
                </svg>
            </div>
            <br>
            <br>

            <br>
            <h3 style="font-size: 14px;line-height: 28px">3.以下为一些图片图标元素下拉加载时应用的过度动画</h3>
            <br>
            <div class="wave" data-scroll-watch id="wave">
                <div class="after" id="after"></div>
                <div class="before" id="before"></div>
            </div>
            <br>
            <br>
            <br>
            <div id="testBox" class="demo anim_box" data-scroll-watch>
                <img class="anim_image anim_image_top" src="images/ps6.jpg" />
                <img class="anim_image anim_image_bottom" src="images/ps4.jpg" />
            </div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <li class="img-demo2" data-scroll-watch>
                <img src="images/classsic-1.jpg" alt="">
            </li>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <li class="img-demo double_show" data-scroll-watch>
                <div class="pro img_scale ">
                    <img src="images/case2.jpg" alt="" id="watchani">
                </div>
            </li>
            <br>
            <br>
            <br>
            <br>
            <br>
            <li data-scroll-watch class="rect-demo">
                <div class="pro">
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <div style="overflow: hidden;width: 100%;height: 100%;position: relative;">
                        <div class="icon_show" style="background: url('images/brands20.png') no-repeat center;"></div>
                    </div>
                </div>
            </li>
            <br>
            <br>
            <br>
            <br>
            <br>
            <li class="demolist" data-scroll-watch>
                <div class="icon-item">
                    <i></i>
                    <span id="anitext">
                    </span>
                </div>
                <div class="desc">
                    <h3>杭州蒙特</h3>
                    <p>Hangzhou Mountor
                    </p>
                </div>
            </li>
            <br>
            <br>
            <br>
            <br>
            <br>
            <h3>4.以下是一些箭头图标鼠标经过的效果</h3>
            <br>
            <br>
            <br>
            <span class="link-icon"> <span class="link-icon-icon"> <svg aria-labelledby="link-icon-svg" role="img" class="icon"><title id="link-icon-svg-title">Contactez-nous</title> <desc>Contactez-nous</desc> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-light-right"></use> </svg> </span></span>
            <br>
            <br>
            <h3>5.以下为一些字体加载时显示的动画效果</h3>
            <div class="tit-overlap" data-scroll-watch>
                <span data-letters="杭州蒙特" class="clearfix">杭州蒙特</span>
            </div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div>
                <h2 class="myfadeOut" id="fadeout" data-scroll-watch style="visibility: hidden;">
                    杭州蒙特信息技术有限公司
                </h2>
            </div>
            <br>
            <br>
            <br>
            <br>
            <div>
                <h2 id="fadeout3" data-scroll-watch>杭州蒙特信息技术有限公司</h2>
            </div </div>
            <div class="footer">
            </div>
        </div>
        <svg style="display: none">
            <symbol id="arrow-light-right" viewBox="0 0 16 14">
                <path d="M9.8.5H8.2l5.6 5.9H.1v1.2h13.7l-5.6 5.9h1.6L15.9 7z"></path>
            </symbol>
        </svg>
</body>

</html>
<script type="text/javascript" src="js/wow.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/jquery.drawsvg.js"></script>
<!-- 此JS为响应式标题插件 -->
<script type="text/javascript" src="js/jquery.fittext.js"></script>
<!-- 文字特效依赖以下两个JS -->
<script type="text/javascript" src="js/jquery.lettering.js"></script>
<script type="text/javascript" src="js/jquery.textillate.js"></script>
<script type="text/javascript" src="js/scorllWatch.js"></script>
<script type="text/javascript" src="js/vivus.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript">
var anim = document.getElementById("anitext");

var anim2 = document.getElementById("after");

var pfx = ["webkit", "moz", "MS", "o", ""];

function PrefixedEvent(element, type, callback) {
    for (var p = 0; p < pfx.length; p++) {
        if (!pfx[p]) type = type.toLowerCase();
        element.addEventListener(pfx[p] + type, callback, false);
    }
}

PrefixedEvent(anim, "AnimationStart", function() {
    console.log('AnimationStart')
});
</script>
<script type="text/javascript">
// 字淡入函数
function FadeOut(Class, time) {
    var txt = $(Class).text().trim();
    var txt_arr = txt.split("");
    var html = "";
    for (var i = 0; i < txt_arr.length; i++) {
        html += "<span>" + txt_arr[i] + "</span>";
    }
    $(Class).html(html);
    $(Class).css("visibility", "visible");

    var num = -1;
    var font_num = txt_arr.length;
    var arr = (function() {
        var _arr = [];
        for (var i = 0; i < font_num; i++) {
            _arr.push(i);
        }
        return _arr;
    })().sort(function(a, b) {
        return Math.random() - 0.5;
    }).slice(0, font_num);
    var SetTime = setInterval(function() {
        num++;
        if (num > font_num - 1) {
            clearInterval(SetTime);
        } else {
            $(Class).find("span").eq(arr[num]).css('opacity', '1');
        }
    }, time)
}



// 响应式标题插件
jQuery("#fadeout3").fitText(3, { minFontSize: '20px', maxFontSize: '40px' });



$("#fadeout3").textillate({
    autoStart: !1,
    loop: !1,
    in: {
        effect: "fadeInMask Org",
        delayScale: 1,
        shuffle: !0
    },
    out: {
        effect: "fadeOut",
        delayScale: 0,
        delay: 0
    }
});

$(document).ready(function() {
    var ws = new ScrollWatch({
        onElementInView: function(data) {
            if (data.el.id == 'fadeout') {
                FadeOut('#fadeout', 40);
            }
            if (data.el.id == 'fadeout2') {
                FadeOut('#fadeout2', 40);
            }
            if (data.el.id == 'fadeout3') {
                $("#fadeout3").textillate("start")
            }
            if (data.el.id == 'wave') {
                $("#wave").trigger('click')
            }
        }
    });
});

var a = setTimeout(function() {
    $("#wave").trigger('click')
}, 2400)

$("#wave").stop().bind("click", function() {
    $("#wave").addClass("ani");
    var that = $(this);
    $(this).find("#after").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
        that.removeClass("ani")
    });
});


(function($) {
    jQuery.fn.backgroundPosition = function() {
        var bgPosition = $(this).css('background-position');
        if (typeof(bgPosition) == 'undefined') {
            return $(this).css('background-positionX') + ' ' + $(this).css('background-positionY');
        } else {
            return bgPosition;
        }
    };
})(jQuery);


var ef = new ScrollWatch({
    watch: '.banner_item',
    onElementInView: function(data) {
        $window = $(window),
            scrollTimer = null,
            currentY = parseInt($('.banner_item').backgroundPosition().split(' ')[1]);
        $(window).scroll(function() {
            if ($window.scrollTop() >= 0 && $window.scrollTop() <= 800) {
                positionY = currentY + parseInt(-$window.scrollTop() / 2);
                scale = 1 + 2 * ($window.scrollTop() / 10000);
                $('.banner_item').css({
                    // 'background-position': 'center ' + positionY + 'px',
                    'transform': "scale(" + scale + ")"
                })
            }
        })
    }
});

var flag = false;

var mySVG = $('#svgdemo').drawsvg({
    duration: 2400,
    easing: 'swing',
    reverse: flag,
    callback: function() {
        animate()
    }
});

function animate() {
    flag = !flag;
    mySVG.drawsvg('animate');
}
animate()


// var myvivus0 = new Vivus('svgdemo0', { type: 'delayed', duration: 40 });
// $(".demo0").on("click", function() {
//     myvivus0.reset();
//     myvivus0.play();
// })

// var mySVG2 = $('#svgdemo0').drawsvg({
//     duration: 1400,
//     easing: 'swing',
//     reverse: flag,
//     callback: function() {
//         $(".cls-1").addClass("show");
//         // animate2()
//     }
// });
// mySVG2.drawsvg('animate');
// function animate2() {
//     mySVG2.drawsvg('animate');

// }
// animate2()
// var myvivus0 = new Vivus('svgdemo0', { type: 'delayed', duration: 80 });
// $(".svg-demo0").on("click", function() {
//     myvivus0.reset();
//     myvivus0.play();
// })





var myvivus = new Vivus('svgdemo2', { type: 'delayed', duration: 40 });
$(".svg-demo2").on("click", function() {
    myvivus.reset();
    myvivus.play();
})


var myvivus2 = new Vivus('svgLoan', { type: 'delayed', duration: 40 });
$(".svg-demo3").on("click", function() {
    myvivus2.reset();
    myvivus2.play();
})





document.querySelector('.button-demo').onmousemove = function(e) {
    const x = e.pageX - e.target.offsetLeft;
    const y = e.pageY - e.target.offsetTop;
    e.target.style.setProperty('--x', `${x}px`);
    e.target.style.setProperty('--y', `${y}px`)
}



function randomColor() {
    var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16);
    if (rand.length == 6) {
        return rand;
    } else {
        return randomColor();
    }
}


$.fn.RangeSlider = function(cfg) {
    this.sliderCfg = {
        min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,
        max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
        step: cfg && Number(cfg.step) ? cfg.step : 1,
        callback: cfg && cfg.callback ? cfg.callback : null
    };

    var $input = $(this);
    var min = this.sliderCfg.min;
    var max = this.sliderCfg.max;
    var step = this.sliderCfg.step;
    var callback = this.sliderCfg.callback;

    $input.attr('min', min)
        .attr('max', max)
        .attr('step', step);

    $input.bind("input", function(e) {
        $input.attr('value', this.value);
        $input.css('background', 'linear-gradient(to right, #059CFA, white ' + this.value + '%, white)');

        if ($.isFunction(callback)) {
            callback(this);
        }
    });
};

var change = function() {

}
$('#rangeinput').RangeSlider({ min: 0, max: 100, step: 0.1, callback: change });

$('#rangeinput').mousemove(function(event) {
    var w = parseInt($(this).val() * 2);
    console.log(w)
    $("#svgLoan").attr("width", w);

});
$('#rangeinput').change(function(event) {
    var a = randomColor();
    var b = randomColor();
    $("#svgLoan").find(".color1").css("stroke", a)
    $("#svgLoan").find(".color2").css("stroke", b)
});
</script>

    <script>
    $(".smoke-triggle").click(function() {
        $("#bg-transition").show();
        // setTimeout(function(){
        $("#bg-transition").addClass('is-show');
        var that = $(this);
        setTimeout(function() {
            $("#bg-transition").hide().removeClass('is-show')
        }, 3000)
        // },600)
    })
    </script>







<script type="text/javascript">
$(function() {
    $(".sparkley:first").sparkleh();
    $(".sparkley:last").sparkleh({
        color: "rainbow",
        count: 20,
        overlap: 10
    });
    // here we create fuscia sparkles
    $("h1").sparkleh({
        count: 80,
        color: "#ff0080"
    });
    $("p").sparkleh({
        count: 20,
        color: "#00ff00"
    });

    $("#image").imagesLoaded(function() {
        $(".img").sparkleh({
            count: 25,
            color: ["#00afec", "#fb6f4a", "#fdfec5"]
        });
    });

});

$.fn.sparkleh = function(options) {

    return this.each(function(k, v) {

        var $this = $(v).css("position", "relative");

        var settings = $.extend({
            width: $this.outerWidth(),
            height: $this.outerHeight(),
            color: "#FFFFFF",
            count: 30,
            overlap: 0
        }, options);

        var sparkle = new Sparkle($this, settings);

        $this.on({
            "mouseover focus": function(e) {
                sparkle.over();
            },
            "mouseout blur": function(e) {
                sparkle.out();
            }
        });

    });

}

function Sparkle($parent, options) {
    this.options = options;
    this.init($parent);
}

Sparkle.prototype = {

    "init": function($parent) {

        var _this = this;

        this.$canvas =
            $("<canvas>")
            .addClass("sparkle-canvas")
            .css({
                position: "absolute",
                top: "-" + _this.options.overlap + "px",
                left: "-" + _this.options.overlap + "px",
                "pointer-events": "none"
            })
            .appendTo($parent);

        this.canvas = this.$canvas[0];
        this.context = this.canvas.getContext("2d");
        this.sprite = new Image();

        this.canvas.width = this.options.width + (this.options.overlap * 2);
        this.canvas.height = this.options.height + (this.options.overlap * 2);

        this.sprites = [0, 6, 13, 20];
        this.particles = this.createSparkles(this.canvas.width, this.canvas.height);

        this.anim = null;
        this.fade = false;

    },

    "createSparkles": function(w, h) {

        var holder = [];

        for (var i = 0; i < this.options.count; i++) {

            var color = this.options.color;

            if (this.options.color == "rainbow") {
                color = '#' + Math.floor(Math.random() * 16777215).toString(16);
            } else if ($.type(this.options.color) === "array") {
                color = this.options.color[Math.floor(Math.random() * this.options.color.length)];
            }

            holder[i] = {
                position: {
                    x: Math.floor(Math.random() * w),
                    y: Math.floor(Math.random() * h)
                },
                style: this.sprites[Math.floor(Math.random() * 4)],
                delta: {
                    x: Math.floor(Math.random() * 1000) - 500,
                    y: Math.floor(Math.random() * 1000) - 500
                },
                size: parseFloat((Math.random() * 2).toFixed(2)),
                color: color
            };

        }

        return holder;

    },

    "draw": function(time, fade) {

        var ctx = this.context;
        var img = this.sprite;
        img.src = this.datauri;

        ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

        for (var i = 0; i < this.options.count; i++) {

            var derpicle = this.particles[i];
            var modulus = Math.floor(Math.random() * 7);

            if (Math.floor(time) % modulus === 0) {
                derpicle.style = this.sprites[Math.floor(Math.random() * 4)];
            }

            ctx.save();
            ctx.globalAlpha = derpicle.opacity;
            ctx.drawImage(img, derpicle.style, 0, 7, 7, derpicle.position.x, derpicle.position.y, 7, 7);

            if (this.options.color) {

                ctx.globalCompositeOperation = "source-atop";
                ctx.globalAlpha = 0.5;
                ctx.fillStyle = derpicle.color;
                ctx.fillRect(derpicle.position.x, derpicle.position.y, 7, 7);

            }

            ctx.restore();

        }

    },

    "update": function() {

        var _this = this;

        this.anim = window.requestAnimationFrame(function(time) {

            for (var i = 0; i < _this.options.count; i++) {

                var u = _this.particles[i];

                var randX = (Math.random() > Math.random() * 2);
                var randY = (Math.random() > Math.random() * 3);

                if (randX) {
                    u.position.x += (u.delta.x / 1500);
                }

                if (!randY) {
                    u.position.y -= (u.delta.y / 800);
                }

                if (u.position.x > _this.canvas.width) {
                    u.position.x = -7;
                } else if (u.position.x < -7) {
                    u.position.x = _this.canvas.width;
                }

                if (u.position.y > _this.canvas.height) {
                    u.position.y = -7;
                    u.position.x = Math.floor(Math.random() * _this.canvas.width);
                } else if (u.position.y < -7) {
                    u.position.y = _this.canvas.height;
                    u.position.x = Math.floor(Math.random() * _this.canvas.width);
                }

                if (_this.fade) {
                    u.opacity -= 0.02;
                } else {
                    u.opacity -= 0.005;
                }

                if (u.opacity <= 0) {
                    u.opacity = (_this.fade) ? 0 : 1;
                }

            }

            _this.draw(time);

            if (_this.fade) {
                _this.fadeCount -= 1;
                if (_this.fadeCount < 0) {
                    window.cancelAnimationFrame(_this.anim);
                } else {
                    _this.update();
                }
            } else {
                _this.update();
            }

        });

    },

    "cancel": function() {

        this.fadeCount = 100;

    },

    "over": function() {

        window.cancelAnimationFrame(this.anim);

        for (var i = 0; i < this.options.count; i++) {
            this.particles[i].opacity = Math.random();
        }

        this.fade = false;
        this.update();

    },

    "out": function() {

        this.fade = true;
        this.cancel();

    },

    "datauri": ""

};

// $('img.photo',this).imagesLoaded(myFunction)
// execute a callback when all images have loaded.
// needed because .load() doesn't work on cached images

// mit license. paul irish. 2010.
// webkit fix from Oren Solomianik. thx!

// callback function is passed the last image to load
//   as an argument, and the collection as `this`

$.fn.imagesLoaded = function(callback) {
    var elems = this.filter('img'),
        len = elems.length,
        blank = "";

    elems.bind('load.imgloaded', function() {
        if (--len <= 0 && this.src !== blank) {
            elems.unbind('load.imgloaded');
            callback.call(elems, this);
        }
    }).each(function() {
        // cached images don't fire load sometimes, so we reset src.
        if (this.complete || this.complete === undefined) {
            var src = this.src;
            // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
            // data uri bypasses webkit log warning (thx doug jones)
            this.src = blank;
            this.src = src;
        }
    });

    return this;
};
</script>